<template>
  <PublicPage pageName="选择运费模板" class="select-template">
    <!-- 搜索输入框 -->
    <SearchInput placeholder="搜索运费模板" :hasBorder="false" @searchFn="searchFn"/>
    <!-- 运费模板列表 -->
    <scroll-view scroll-y class="scroll-wrap">
      <view class="template-list">
        <view v-for="(item, index) in list" :key="index" class="template-item">
          <view class="u-flex u-flex-1 item-l" @click="changeSelect(item)">
            <view
                class="iconfont"
                :class="{
                'icon-checkbox_fill':routeData.templateId==item.templateId,
                'icon-checkbox':routeData.templateId!=item.templateId,
              }"
            ></view>
            <text class="name">{{item.name}}</text>
          </view>
          <view class="button-wrap" v-if="item.templateId!=0">
            <view class="iconfont icon-edit" @click="edit(item)"></view>
            <view class="iconfont icon-delete" @click.stop="openModal(item)"></view>
          </view>
        </view>
      </view>
    </scroll-view>
    <!-- 底部按钮 -->
    <view class="footer-button u-flex">
      <button class="l-btn button">新建模板</button>
      <button class="r-btn button">确认选择</button>
    </view>

    <!-- 删除运费模板确认框 -->
    <u-modal v-model="dlModal" :show-title="false" :show-confirm-button="false">
      <view class="delete-modal">
        <view class="fz-18 tc fw5 viceColorN8 linh-24">删除运费模板</view>
        <view class="modal-delete-content">
          是否要删除"
          <text class="viceColorN9">{{deleteItem.name}}</text>
          "?删除后已使用本模板的商品运费将默认改为全国包邮
        </view>
        <view class="modal-button-wrap">
          <view class="button" @click="dlModal=false">取消</view>
          <view class="button themeFontColor fw5" @click="configDel">确定</view>
        </view>
      </view>
    </u-modal>
  </PublicPage>
</template>

<script>
import PublicPage from '@/components/publicPage/index.vue'
import SearchInput from '@/components/searchInput/index.vue'

import freightApi from '@/api/freight.js'

export default {
  name: 'selectTemplate',
  components: {
    PublicPage,
    SearchInput
  },
  data() {
    return {
      list: [], // 运费模板列表
      routeData: {}, // 路由参数
      dlModal: false, // 删除运费模板确认框变量
      deleteItem: null, // 即将要删除的运费模板对象
    }
  },
  onLoad(option) {
    this.routeData = option
  },
  onShow() {
    this.getFreightList()
  },
  methods: {
    // 搜索输入框搜索函数
    searchFn(val) {},
    // 选择运费模板
    changeSelect(item) {
      this.routeData.templateId = item.templateId
    },
    // 打开删除运费模板确认框
    openModal(item) {
      this.deleteItem = item
      this.dlModal = true
    },
    // 编辑运费模板
    edit(row) {
      this.navigateTo({ url: '/pagesB/freightTemplate/editTemplate?templateId='+row.templateId })
    },
    // 确认删除
    configDel() {
      console.log(this.deleteItem)
    },
    // 获取运费列表
    getFreightList(keyword) {
      freightApi.freightList().then(res => {
        if (res.code === 200) {
          this.list = res.data || []
          this.list.unshift({name: '全国包邮', templateId: 0})
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.select-template {
  .scroll-wrap {
    width: 100%;
    height: calc(100% - 196rpx);
    padding: 0 32rpx;
  }
  .template-list {
    padding-top: 32rpx;
  }
  .template-item {
    display: flex;
    padding: 0 32rpx;
    margin-bottom: 32rpx;
    border-radius: 16rpx;
    background-color: #FFFFFF;

    .item-l {
      padding: 32rpx 0;
    }

    .icon-checkbox_fill,
    .icon-checkbox {
      width: 40rpx;
      height: 40rpx;
      margin-right: 16rpx;
      font-size: 40rpx;

    }
    .icon-checkbox_fill {
      color: $themeColor;
    }
    .icon-checkbox {
      color: $n6Color;
    }

    .name {
      flex: 1;
      font-size: 28rpx;
      color: $n8Color;
      line-height: 40rpx;
      font-weight: 500;
    }

    .button-wrap {
      display: flex;
      justify-content: space-between;
      width: 112rpx;
      padding: 32rpx 0;
      margin-left: 16rpx;
    }

    .icon-edit,
    .icon-delete {
      font-size: 40rpx;
      color: $n8Color;
    }
  }

  .delete-modal {
    padding: 48rpx 0 0;
    .modal-delete-content {
      padding: 0 48rpx 48rpx;
      margin-top: 16rpx;
      color: $n6Color;
      font-size: 32rpx;
      line-height: 44rpx;
      text-align: center;
    }
    .modal-button-wrap {
      display: flex;
      line-height: 96rpx;
      font-size: 32rpx;
    }
    .button {
      width: 50%;
      text-align: center;
      font-weight: 500;
      box-shadow: 2rpx -2rpx 2rpx #ebedf0;
      color: $n6Color;
    }
  }

  .footer-button {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 96rpx;
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);

    .button {
      width: 50%;
      height: 100%;
      text-align: center;
      line-height: 96rpx;
      font-size: 32rpx;
      border-radius: 0;
      color: #FFFFFF;
    }

    .l-btn {
      background-color: $n9Color;
    }

    .r-btn {
      background-color: $themeColor;
    }
  }
}
</style>
